<!-- slot插槽 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<body>
    <!-- view 层 模板 -->
    <div id="app">
        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
        </todo>
    </div>

    

    <!-- 导入vue.js -->
    <script src="../public/vue2-5-21.js"></script>
    <script>

        Vue.component("todo", {
            template: `<div>
                            <slot name="todo-title"></slot>
                            <ul>
                                <slot name="todo-items"></slot>
                            </ul>
                        </div>`
        })

        Vue.component("todo-title", {
            props: ["title"],
            template: '<div>{{title}}</div>'
        })

        Vue.component("todo-items", {
            props: ["item", "index"],
            // 只能绑定组件单前的方法
            template: '<li>{{index}} -- {{item}} <button @click="remove">删除</button></li>',
            methods: {
                remove: function (index) {
                    // 调用自定义事件
                    // 子组件向父组件传值
                    // this.$emit('remove', index) 中的remove是事件名 
                    this.$emit('remove', index)
                }
            }
        })

        var vm = new Vue({
            // 绑定dom
            el: "#app",
            data: {
                title:"hhhh",
                todoItems: ["java", "python", "golang"]
            },
            methods: {
                removeItems: function(index) {
                    console.log("删除了" + this.todoItems[index])
                    this.todoItems.splice(index, 1); // 一次删除一个元素
                }
            }
        });

    </script>
</body>
</html>